<template>
  <div class="myOrder_container pr-1 pl-1">
		<div class="myOrder_container_headline br-16 mb-1">
			<div class="myOrder_container_headline_top mb-1 pl-1 pr-1">
				<div class="headline_top_left">
					<img src="@/image/aiQuantization/myOrder/exclusive-icon.png" class="mr-0" alt="">
					<span>{{ $t("专属权益") }}</span>
				</div>
				<div class="headline_top_right">
					{{ dataInfo.myMoney }}&nbsp;{{ dataInfo.currency }}
				</div>
			</div>
			<div class="myOrder_container_meal pl-1 pr-1 mb-1">
				<img src="@/image/aiQuantization/myOrder/exclusive-icon2.png" class="mr-0" alt="">
				<span>{{ $t("投资套餐") }}</span>
			</div>

			<div class="myOrder_container_hr pl-1 pr-1 mb-1"><div></div></div>
			
			<div class="headline_content pl-1 pr-1">
				<div class="headline_content_item" v-for="(item,index) in dataInfo.myMeal" :key="index"> 
					<div class="headline_content_item_title mb-0">{{ item.standard }}</div>
					<div class="headline_content_item_money">{{ item.money }}</div>
				</div>
			</div>
		</div>

		<div class="myOrder_container_tabs mb-1">
			<div :class="['myOrder_container_tabs_item' , tabActive == item.id? 'active' : '']" v-for="(item,index) in tabsList" :key="index" @click="changeTab(item.id)">{{ item.name }}</div>
		</div>

		<div v-if="myOrderList.length">
			<div class="myOrder_container_orderList padding-1 br-16 mb-1" v-for="(item,index) in myOrderList" :key="index" @click="goOrderDetail(item.id)">
				<div class="orderList_title mb-0">
					<div class="orderList_title_left">
						<img :src="item.logo" class="mr-0" alt="">
						<span>{{ item.name }}</span>
					</div>
					<div class="orderList_title_right">
						<span class="exclusive_icon mr-0">{{ item.is_exclusive }}</span>
						<span v-if="item.type == 1" class="running_icon">{{ $t("运行中") }}</span>
						<span v-if="item.type == 2" class="redeeming_icon">{{ $t("赎回中") }}</span>
						<span v-if="item.type == 3" class="expired_icon">{{ $t("已到期") }}</span>
					</div>
				</div>
				<div class="orderList_date pb-0 mb-0">
					<span>{{ item.date }}</span>
					<div class="orderList_date_token">
						<span class="mr-0">{{ item.token }}</span>
						<img src="@/image/aiQuantization/indexTop/arrow.png" alt="">
					</div>
				</div>
	
				<div class="orderList_content">
					<div class="orderList_content_item">
						<div class="orderList_content_item_value mb-0">{{ item.dayNumber }}<span>{{ $t("天") }}</span></div>
						<div class="orderList_content_item_label">{{ $t("运行天数") }}</div>
					</div>
					<div class="orderList_content_item">
						<div class="orderList_content_item_value mb-0">{{ item.yield }}<span>{{ $t("%") }}</span></div>
						<div class="orderList_content_item_label">{{ $t("累计收益率") }}</div>
					</div>
					<div class="orderList_content_item">
						<div class="orderList_content_item_value mb-0">{{ item.earnings }}<span>{{ $t("SAT") }}</span></div>
						<div class="orderList_content_item_label">{{ $t("累计收益") }}</div>
					</div>
				</div>
	
			</div>
		</div>
		<van-empty v-else :description="$t('暂无数据')" />

	</div>
</template>

<script>
import { getMyOrder } from "@/request/aiQuantization"
import BusinessUtils from '@/utils/business'
export default {
	name: "MyOrder",
	data(){
		return{
			dataInfo:{
				// 此处请求个人订单数据
				myMoney: 0,
				currency: this.$t("SUSD"),
				myMeal:[
					{
						standard: "50+",
						money:0
					},{
						standard: "1000+",
						money:0
					},{
						standard: "10000+",
						money:0
					},{
						standard: "100000+",
						money:0
					}
				],
			},
			tabActive:1,
			tabsList:[
				{ id: 1, name: this.$t('运行中') },
				{ id: 2, name: this.$t('赎回中') },
				{ id: 3, name: this.$t('已到期') },
			],
			myOrderList:[],
			list: [],
		}
	},
	mounted(){
		// 在此请求个人订单数据
		// 根据 tabActive 状态id请求列表
		this.getMyOrderList()
	},
	methods:{
		changeTab(id){
			this.tabActive = id;
			this.getMyOrderList();
		},
		getMyOrderList(){
			// 此处请求对应tab的订单数据
			// for(let i = 0; i < 10; i++){
			// 	this.myOrderList.push({
			// 		id:i,
			// 		name: "SPACE AI",
			// 		logo: require("@/image/aiQuantization/myOrder/aIQuantificationBg3.png"),
			// 		is_exclusive: true,
			// 		type: 1,
			// 		date: new Date().toLocaleString(),
			// 		token: '15661213288asdas8d2',
			// 		dayNumber: '184',
			// 		yield: '239.2',
			// 		earnings: '8966.9625'
			// 	})
			// }
			getMyOrder({}).then(res=>{
				if(res.code == 1){
					// 专属权益
					this.dataInfo.myMoney = res.data.zhuanshu.total_money || 0
					this.dataInfo.currency = res.data.zhuanshu.currency || this.$t("SUSD")

					// 投资套餐
					if(res.data.taocan.length > 0){
						this.dataInfo.myMeal = []
						res.data.taocan.forEach(item=>{
							this.dataInfo.myMeal.push({
								id: item.id,
								standard: Number(item.min_amount).toFixed(2),
								money: item.total_money>0 ?Number(item.total_money).toFixed(4) : 0
							})
						})
					}

					// 订单列表
					// res.data.order
					this.list = res.data.order
					this.disposeList()
				}
			})
		},
		disposeList(){
			// 在此处理列表数据
			switch(this.tabActive){
				case 1:
					this.disposeOrderList(this.list.runing.data)
					break;
				case 2:
					this.disposeOrderList(this.list.backing.data)
					break;
				case 3:
					this.disposeOrderList(this.list.over.data)
					break;
			}
		},
		disposeOrderList(value){
			this.myOrderList = value.map(item => {
				let is_exclusive
				if(item.type == 1){
					is_exclusive = this.$t("专属权益");
				}
				else if(item.type == 2){
					is_exclusive = this.$t("投资套餐")+" L"+item.weight;
				}
				else if(item.type == 3){
					is_exclusive = this.$t("体验套餐");
				}

				return {
					id: item.id,
					name: item.product_name,
					logo: require("@/image/aiQuantization/myOrder/aIQuantificationBg3.png"),
					is_exclusive: is_exclusive,
					type: this.disposeStatus(item),
					date: item.createtime,
					token: item.order_no,
					dayNumber: item.execute_day,
					yield: item.leiji_rate,
					earnings: Number(item.leiji_money).toFixed(4),
					product_type: item.type,
				}
			})
		},
		disposeStatus(val){
			return BusinessUtils.getProductStatusCode(val.pay_status, val.status, val.withdraw);
		},
		goOrderDetail(id){
			// 此处跳转订单详情页携带id
			if (this.$route.path !== 'orderDetail') {
				this.$router.push({ 
					name: 'OrderDetail',
					params: { 
						// 可以传递需要的参数
						id: id
					}
				})
			}
		}
	}
}
</script>

<style>

</style>